<!--
 * @Author: 蔡周峻
 * @Date: 2024-10-14 16:06:11
 * @LastEditors: 蔡周峻
 * @LastEditTime: 2024-10-14 16:24:23
 * @Description: 
 * @FilePath: \agcim.barium\Apps\10GlobeSurfaceTileWithAppearance.html
-->
<!doctype html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>9GlobeSurfaceTile!</title>
    <script src="../Build/BariumUnminified/Barium.js"></script>
    <script src="./10GlobeSurfaceTileWithAppearance.js"></script>
    <style>
        

        html,
        body,
        #bariumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div style="display: block;position: absolute;z-index: 100;color: white;background:black;border: 1px solid rgb(94, 92, 224);">
        <div>本示例加载一个非常简单的RectangleGeometry到地球上。</div>
        <img src="./imgs/exampleImages/10GlobeSurfaceTileWithAppearance.jpg"/>
    </div>
    <div id="bariumContainer"></div>
    <script type="module">
        const viewer = new Barium.RenderWindow("bariumContainer");

        createGeometry(viewer.scene);

        const camera = viewer.scene.camera;
        var x = 1.8;
        let shift = 0.0;
        setInterval(() => {
           // viewer.scene.camera.position = new Barium.Cartesian3(shift, 1, 0);
            shift += 0.1;
            if (shift > 20) {
                shift = -20;
            }
        }, 100);


    </script>
</body>

</html>